<template>
  <div class="message">
    <div class="my-head">
      <x-header>消息<a slot="right"></a></x-header>
      <tab :line-width="1" custom-bar-width="70px">
        <tab-item :selected="i===0" v-for="(item,i) in tabList" :key="i" @on-item-click="onItemClick">{{item}}</tab-item>
      </tab>
    </div>
    <scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="padding-top:95px;min-height: 500px;" ref="my_scroller">
      <div v-if="list.length>0">
        <div class="commentList" @click="handleToService(active===0,item)" v-for="(item,i) in list" :key="i">
          <i style="color:#999999;" class="remove-icon icon-quxiao" @click.stop="handleRemove(item)" type="ios-close-empty" size="30"></i>
          <div class="top">
            <div class="left">
              <avatar :src="item.sender && item.sender.avatar" username="Lairenna Doe" :size="40"></avatar>
            </div>
            <div class="right">
              <div class="right-1">
                <div>
                  <span>{{item.sender && item.sender.nickname}}</span>
                  <span>{{getTime(item.createTime)}}<badge class="my-badge" v-if="active===0&&!item.isRead"></badge></span>
                </div>
                <div class="xiaoxi-con">{{item.msg}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroller>
    <confirm v-model="show" :title="removeData.sender && removeData.sender.nickname">
      <p style="text-align:center;">{{removeData.msg}}</p>
    </confirm>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import Avatar from 'vue-avatar';
import { formatMsgTime } from '../js/getTime'
import { getUnixTime } from '../js/utils'
import { Tab, TabItem, Confirm, XHeader, Group, Cell, Badge } from 'vux';

const IndexStore = namespace('list');

@Component({
  components: { Tab, TabItem, Confirm, XHeader, Group, Cell, Avatar, Badge }
})
export default class Message extends Vue {
  @IndexStore.Action getNotices
  @IndexStore.Action getReadnotice
  @IndexStore.State noticeList
  active = 0
  show = false
  removeData = []
  tabList = ['消息列表', '系统通知']
  list = []
  currentPage = 1
  pageSize = 10
  noDataText = '--我也是有底线的--'
  infinite () {
    this.getData()
    this.currentPage++
    setTimeout(() => {
      this.$refs.my_scroller.finishInfinite(true)
    }, 1000)
  }
  myTime = new Date()
  refresh () {
    this.myTime = new Date()
    setTimeout(() => {
      this.list = []
      this.currentPage = 1
      this.$refs.my_scroller.finishPullToRefresh()
    }, 1000)
  }
  onItemClick (index) {
    this.active = index;
    this.list = []
    this.currentPage = 1
    this.getData()
  }
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
  handleRemove (item) {
    this.removeData = item
    this.show = true
  }
  handleToService (b, item) {
    if (b) {
      const params = {
        _id: item._id
      }
      this.getReadnotice(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          item.isRead = true
        }
      })
      localStorage.setItem('receiverInfo', JSON.stringify(item.sender))
      this.$router.push('/chatlist/1')
    }
  }
  getData () {
    const params = {
      type: this.active === 0 ? 'chat' : 'system',
      current: this.currentPage,
      createTime: getUnixTime(this.myTime),
      pageSize: this.pageSize
    }
    this.getNotices(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.noticeList
        list.forEach(v => {
          v.isRead = false
        })
        this.list = this.list.concat(list)
      }
    })
  }
}
</script>
<style lang="less">
  .message {
    padding-top: 46px;
    position: relative;
    .my-badge {
      margin-left: 10px;
    }
    .xiaoxi-con {
      line-height: 24px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }
    .commentList {
      position: relative;
      width: 95%;
      margin: 0 auto;
      border-radius: 10px;
      background: #ffffff;
      margin-bottom: 5px;
      padding: 10px 20px;
      box-sizing: border-box;
      .remove-icon {
        position: absolute;
        right: 5px;
        top: 5px;
      }
      .weui-cells:before {
        content: initial;
      }
      .weui-cells {
        margin-top: 0;
      }
      .weui-cell__ft {
        text-align: left;
        width: 100%;
      }
      .top {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .right {
          // font-size: 12px;
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .right-1 {
          display: flex;
          flex-direction: column;
        }
        .right-2 {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .vux-header-left {
      display: none;
    }
    .weui-panel:before {
      content: initial;
    }
    .weui-panel:after {
      content: initial;
    }
    .weui-media-box:before {
      content: initial;
    }
    .weui-panel {
      background: none;
      margin-top: 5px;
    }
    .weui-media-box {
      width: 95%;
      margin: 0 auto;
      margin-bottom: 5px;
      background: #ffffff;
      border-radius: 10px;
    }
  }
</style>
